<!-- xuwencheng  2022年6年29日18:00  这是我的wenzhangbianji -->
<!-- 编辑 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destory-on-close="true"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="65%"
    @close="close"
  >
    <el-form ref="form" label-width="200px" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系电话" />
      </el-form-item>
      <el-form-item label="演员头像" prop="actorPicture">
        <el-input v-model="form.actorPicture" style="display: none" />
        <el-upload
          v-model="form.actorPicture"
          action="https://star.gengduoke.com/adminapi/file/upload"
          :before-upload="beforeAvatarUpload"
          class="avatar-uploader"
          :headers="{
            'X-Token': token,
          }"
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img v-if="imageUrl" class="avatar" :src="imageUrl" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="性别" prop="sex" @change="aa">
        <!-- <el-input v-model="form.authEnterprise" /> -->
        <el-radio v-model="form.sex" label="1" @change="aa">男</el-radio>
        <el-radio v-model="form.sex" label="0" @change="aa">女</el-radio>
      </el-form-item>
      <el-form-item label="身高(cm)" prop="height">
        <el-input v-model="form.height" placeholder="请输入身高" />
      </el-form-item>
      <el-form-item label="体重(kg)" prop="weight">
        <el-input v-model="form.weight" placeholder="请输入体重" />
      </el-form-item>
      <el-form-item label="出生年月" prop="birthday">
        <el-date-picker
          v-model="form.birthday"
          align="right"
          :picker-options="pickerOptions"
          placeholder="选择出生年月"
          type="date"
        />
      </el-form-item>
      <el-form-item label="毕业院校" prop="school">
        <el-input v-model="form.school" placeholder="请输入毕业院校" />
      </el-form-item>
      <el-form-item label="民族" prop="minzu">
        <el-input v-model="form.minzu" placeholder="请输入民族" />
      </el-form-item>
      <el-form-item label="籍贯" prop="jiguan">
        <el-input v-model="form.jiguan" placeholder="请输入籍贯" />
      </el-form-item>
      <el-form-item label="特长" prop="speciality">
        <el-input v-model="form.speciality" placeholder="请输入特长" />
      </el-form-item>

      <el-form-item label="查询经济公司/领队" prop="enterprise">
        <el-input
          v-model="keyWord"
          clearable
          placeholder="请输入经济公司/领队"
          style="width: 30%"
        />
        <el-button
          icon="el-icon-search"
          style="margin-left: 10px"
          type="primary"
          @click="queryDatass"
        >
          查询
        </el-button>
      </el-form-item>
      <el-form-item v-if="options1 != ''" v-model="disabled" label="查询结果">
        <el-radio-group>
          <el-radio
            v-for="item in options1"
            :key="item.id"
            :label="item.leaNickName"
            :value="item.id"
            @click.native="enterprise(item)"
          >
            <!-- {{ item.leaNickName }} -->
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-else v-model="disabled" label="查询结果">
        {{ shujv }}
      </el-form-item>
      <el-form-item label="经济公司/领队">
        <!-- <el-input v-model="getlist" disabled placeholder="选择结果" /> -->
        {{ getlist }}
      </el-form-item>
      <!-- <el-form-item label="常住城市" prop="stayCity">
        <el-input v-model="form.stayCity" placeholder="请输入常住城市" />
      </el-form-item> -->
      <el-form-item label="城市" prop="stayCity">
        <div class="block">
          <el-cascader
            ref="cascader"
            filterable
            :options="optionswo"
            :placeholder="abc"
            @change="cascar"
          />
        </div>
      </el-form-item>
      <el-form-item label="常驻区域" prop="stayArea">
        <el-select v-model="form.stayArea" placeholder="请选择常驻区域">
          <el-option
            v-for="item in optionsone"
            :key="item.id"
            :label="item.areaName"
            :value="item.id"
            @click.native="chosetwo(item)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属角色" prop="roleId">
        <el-select v-model="form.roleId" placeholder="请选择所属角色">
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.classifyName"
            :value="item.id"
            @click.native="chooseone(item)"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="微信号" prop="wxNumber">
        <el-input v-model="form.wxNumber" placeholder="请输入微信号" />
      </el-form-item>
      <el-form-item label="教育情况" prop="degreeEdu">
        <el-input v-model="form.degreeEdu" placeholder="请输入教育情况" />
      </el-form-item>
      <el-form-item label="有无慢性疾病或严重疾病" prop="health">
        <!-- <el-input v-model="form.authEnterprise" /> -->

        <el-radio-group v-model="form.health" @change="sethealth">
          <el-radio label="1">有</el-radio>
          <el-radio label="0">无</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="form.health == 1" label="健康详情" prop="healthInfo">
        <el-input v-model="form.healthInfo" placeholder="请输入健康详情" />
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入电子邮箱" />
      </el-form-item>
      <el-form-item label="紧急联系人" prop="emergencyCont">
        <el-input v-model="form.emergencyCont" placeholder="请输入紧急联系人" />
      </el-form-item>
      <el-form-item label="紧急联系人手机" prop="emergencyContPhone">
        <el-input
          v-model="form.emergencyContPhone"
          placeholder="请输入紧急联系人手机"
        />
      </el-form-item>
      <el-form-item label="空闲时间" prop="freeTime">
        <el-input v-model="form.freeTime" placeholder="请输入空闲时间" />
      </el-form-item>

      <el-form-item label="其他" prop="other">
        <el-input v-model="form.other" placeholder="请输入其他" />
      </el-form-item>
      <el-form-item label="参演作品" prop="inWork">
        <el-input v-model="form.inWork" placeholder="请输入参演作品" />
      </el-form-item>
    </el-form>
    <el-button class="baocun" size="medium" type="primary" @click="save">
      保存
    </el-button>
  </el-dialog>

  <!-- 增加 -->
</template>

<script>
  /* eslint-disable*/
  import { doAdd, serach, roleId, doEdit, stayArea } from '@/api/yanyuan'
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from 'element-china-area-data'
  import { city } from '@/views/setting/userManagement/guanli/js/city'

  export default {
    name: 'search',

    data() {
      // 手机号码验证
      var contactPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'))
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          if (reg.test(value)) {
            callback()
          } else {
            return callback(new Error('请输入正确的手机号'))
          }
        }
      }
      const validatesurfacePlot = (rule, value, callback) => {
        if (this.form.actorPicture === '') {
          callback(new Error('请添加头像图片!!!!'))
        } else {
          callback()
        }
      }
      const validatesurfacePlotwo = (rule, value, callback) => {
        if (this.form.moka === '') {
          callback(new Error('请添加摩卡图片!!!!'))
        } else {
          callback()
        }
      }
      return {
        pickerOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              },
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              },
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              },
            },
          ],
        },
        options: regionDataPlus,
        selectedOptions: [],
        keyWord: '', //关键词
        token: '',
        imageUrl: '',
        imageUrltwo: [], //摩卡
        getlist: '',
        value: true,
        value1: true,
        dialogVisible: false,
        disabled: false,
        options1: [],
        options2: [],
        options3: [],
        optionsone: [],
        optionswo: city,
        valueone: '', //查询
        valuetwo: '',
        shujv: '暂无数据',
        abc: '暂无数据',
        form: {
          enterprise: '',
        },
        activated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.play()
        },
        deactivated() {
          if (this.$refs.MaskVideo.src) this.$refs.MaskVideo.pause()
        },

        rules: {
          name: [{ required: true, trigger: 'blur', message: '请输入姓名' }],
          height: [{ required: true, trigger: 'blur', message: '请输入身高' }],
          weight: [{ required: true, trigger: 'blur', message: '请输入体重' }],

          phone: [
            {
              required: true,
              trigger: 'blur',
              validator: contactPhone,
            },
          ],

          birthday: [
            {
              required: true,
              trigger: 'change',
              message: '请选择出生年月',
            },
          ],
          leaNickName: [
            { required: true, trigger: 'change', message: '请输入领队名称' },
          ],
          actorPicture: [
            { required: true, trigger: 'change', message: '请添加图片' },
            { validator: validatesurfacePlot, trigger: 'change' },
          ],
          // moka: [
          //   { required: true, trigger: 'change', message: '请添加图片' },
          //   { validator: validatesurfacePlotwo, trigger: 'change' },
          // ],
          stayCity: [
            { required: true, message: '请输入常住城市', trigger: 'blur' },
          ],
          stayArea: [
            { required: true, message: '请输入常住区域', trigger: 'change' },
          ],
          // leaderIntro: [
          //   { required: true, trigger: 'blur', message: '请输入领队简介' },
          // ],
          // enterprise: [
          //   {
          //     required: true,
          //     trigger: 'change',
          //     message: '请选择领队/经纪公司',
          //   },
          // ],
          // areaId: [
          //   { required: true, trigger: 'change', message: '请选择区域' },
          // ],
          // crewAddress: [
          //   { required: true, trigger: 'blur', message: '请输入剧组定位' },
          // ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.token = this.$store.getters['user/token']
      this.fetchDatatwo()
      this.fetchDatathree()
    },
    methods: {
      enterprise(e) {
        this.form.enterprise = e.id
        console.log(this.form.enterprise)
        this.getlist = e.leaNickName
      },
      cascar(e) {
        //选择城市
        this.form.stayCity =
          this.$refs['cascader'].getCheckedNodes()[0].pathLabels[0] +
          '/' +
          this.$refs['cascader'].getCheckedNodes()[0].pathLabels[1] +
          '/' +
          this.$refs['cascader'].getCheckedNodes()[0].pathLabels[2]
      },
      chosetwo(e) {
        console.log(this.form.stayArea)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      beforeAvatarUploadtwo(file) {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return true
      },
      choose(e) {
        this.form.crewTheme = e.themeName
        this.form.crewThemeId = e.id
      }, //选择区域
      chooseone(e) {
        this.form.areaName = e.areaName
        this.form.areaId = e.id
      },
      handleChange(a) {
        this.form.particulars = a
      },
      handleAvatarSuccess(res, file, fileList) {
        this.imageUrl = URL.createObjectURL(file.raw)
        console.log(res)
        this.form.actorPicture = res.data
      },
      handleAvatarSuccesstwo(res, file, fileList) {
        this.imageUrltwo = URL.createObjectURL(file.raw)
        this.form.moka = res.data
      },
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          this.form = Object.assign({}, row)
          this.imageUrl = row.actorPicture
          this.imageUrltwo = row.moka
          this.form.sex = String(row.sex)
          this.form.health = String(row.health)
          this.form.workType = String(row.workType)
          this.getlist = row.enterpriseName
          console.log(this.form.stayCity)
          this.abc = this.form.stayCity
        }
        this.dialogFormVisible = true
      },
      close() {
        let userId = this.form.userId
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        if (!this.form.id) {
          this.form.userId = userId
        }

        this.dialogFormVisible = false
        this.imageUrl = ''
        this.imageUrltwo = ''
        // this.form = ''
      },
      sethealth(e) {
        this.form.health = e
      },
      sethealthtwo(e) {
        this.form.workType = e
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.id) {
              console.log(this.form.enterprise)
              const msg = doEdit(this.form)
              msg.then((res) => {
                console.log(res.msg)
                if (res.msg === '修改成功') {
                  this.$baseMessage(
                    res.msg,
                    'success',
                    'vab-hey-message-success'
                  )
                  this.$emit('fetch-data')
                  this.close()
                }
              })
            } else {
              const msg = doAdd(this.form)
              this.$emit('fetch-data')
              this.close()
              msg.then((res) => {
                console.log(res.msg)
                if (res.msg === '添加成功') {
                  this.$baseMessage(
                    res.msg,
                    'success',
                    'vab-hey-message-success'
                  )
                  this.$router.push({ path: '/other/workflow' })
                }
              })
            }
          }
        })
      },
      nickNameChange() {
        this.$forceUpdate()
      },
      queryDatass() {
        this.queryData()
      },
      queryData() {
        //chaxun
        this.disabled = true
        let keyWord = this.keyWord
        const msg = serach({
          keyWord: keyWord,
        })
        msg.then((res) => {
          // console.log(res.data)
          if (res.msg == 'success') {
            this.options1 = res.data
            console.log(this.options1)
          }
        })
      },
      async fetchDatatwo() {
        let queryForm = {}
        const res = await roleId(queryForm)
        this.options2 = res.data
        console.log(res)
      },
      async fetchDatathree() {
        let queryForm = {}
        const res = await stayArea(queryForm)
        this.optionsone = res.data
      },
      aa() {
        console.log(this.form)
      },
    },
  }
</script>
<style>
  /* .huakuai {
    position: relative;
    left: 96%;
  } */
  .avatar-uploader .el-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    width: 178px;
    height: 178px;
    font-size: 28px;
    line-height: 178px;
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
    width: 178px;
    height: 178px;
  }
  .baocun {
    width: 100%;
    height: 100%;
  }
</style>
